<template>
  <div class="axiom-filter-chip" :class="{ 'is-active': active }" @click="handleClick">
    <span class="chip-label">{{ label }}</span>
    <AxiomIcon name="ArrowDown" class="chip-icon" />
  </div>
</template>

<script setup>
import AxiomIcon from '../common/AxiomIcon.vue';

defineProps({
  label: {
    type: String,
    required: true,
  },
  active: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(['click']);

const handleClick = () => {
  emit('click');
};
</script>

<style lang="scss">
@use '../../styles/components/mobile/axiom-filter-chip';
</style> 